<template>
  <div class="data-analy-box">
    <div style="padding: 5px" class="user-table" v-if="filterAdd.length > 0">
      <div v-if="routeAreaType != 5">
        <img
          src="/img/left-menu/download.png"
          alt=""
          class="test-icon download-icon-img"
          @click.stop="downloadFile"
          :title="
            home.userInfoVo.superAccount == 2
              ? '试用账号，无法导出表格'
              : '表格导出'
          "
        />
      </div>
      <!-- <img
        src="/img/left-menu/filter.png"
        alt=""
        class="test-icon test-icon-img"
        @click.stop="showFilterBox"
        title="表格筛选"

      >
      <i
        class="el-icon-setting test-icon"
        @click.stop="showFilterDialog"
        title="表格属性列设置"
      ></i> -->
      <ak-table
        :tableLoding="tableLoding"
        :sortAttr="filterSortObj"
        :tableData="filterList"
        :labelObj="filterLabel"
        :addList="filterAdd"
        :checkedIdAttr="'id'"
        :checkedId="gisForm.userLineId"
        :agencyAttrList="['name']"
        @changeSort="changeSortType"
        @changeCId="changeCId"
        :routeAreaType="routeAreaType"
      >
      </ak-table>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          :disabled="tableLoding"
          background
          small
          layout="prev, pager, next"
          :total="filterTotal"
          :page-size="filterPageSize"
          :current-page="filterPageNum"
          align="right"
          :pager-count="5"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 筛选项弹框 -->
    <!-- <div class="filter-dialog" @mousedown.stop @mouseup.stop>
      <el-dialog
        title="筛选"
        :visible.sync="filterDialog"
        width="450px"
        :modal-append-to-body="false"
        @closed="cancelFilterBox"
        :close-on-click-modal="false"
      >
        <div class="filter-content">
          <div>
            <div class="filter-content-box">
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="currentName"
                    @change="getCurrentFilter"
                  >
                    <el-option
                      v-for="(item) in allAttrList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id "
                    />
                  </el-select>
                </div>
                <div></div>
              </div>
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="currentDataSelect.conditionalValueList[0].condition"
                  >
                    <el-option
                      v-for="(item) in filterAttrToListName[currentDataSelect.selectName] "
                      :key="item.id"
                      :label="item.name"
                      :value="item.id "
                    />
                  </el-select>
                </div>
                <div>
                  <el-input
                    size="small"
                    type="number"
                    v-model="currentDataSelect.conditionalValueList[0].value"
                  ></el-input>
                </div>
              </div>
              <div>
                <div>
                  <el-radio v-model="currentDataSelect.andOr" :label="1">且</el-radio>
                </div>
                <div>
                  <el-radio v-model="currentDataSelect.andOr" :label="2">或</el-radio>
                </div>
              </div>
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="currentDataSelect.conditionalValueList[1].condition"
                  >
                    <el-option
                      v-for="(item) in filterAttrToListName[currentDataSelect.selectName]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id "
                    />
                  </el-select>
                </div>
                <div>
                  <el-input
                    size="small"
                    type="number"
                    v-model="currentDataSelect.conditionalValueList[1].value"
                  ></el-input>
                </div>
              </div>
            </div>
            <div>
              <el-button @click="setTableFilter" >新增</el-button>
            </div>
          </div>
          <div class="filter-rule">
            <div>筛选规则:</div>
            <div>
              <div
                v-for="(item) in allAttrList"
                title="点击删除规则"
                :key="item.id"
                v-show=" showGetRule( item.id, dataSelectList ) "
                @click="delRule( item.id )"
              >
                {{ item.id | getRule( dataSelectList, filterAttrToListName, allAttrList ) }}
              </div>
            </div>
          </div>

        </div>
        <div slot="footer">
          <el-button @click="cancelFilterBox">取消</el-button>
          <el-button  type="primary" @click="cancelFilterBox()">确定</el-button>
        </div>
      </el-dialog>
    </div> -->
    <!-- 设置项弹框 -->
    <div class="set-box" @mousedown.stop @mouseup.stop>
      <el-dialog
        title="属性表列自定义"
        :visible.sync="attrDialog"
        width="650px"
        :modal-append-to-body="false"
        @closed="cancelAttrBox"
        :close-on-click-modal="false"
      >
        <div class="attr-tree">
          <div class="attr-tree-left">
            <div>可选择列</div>
            <div>
              <el-tree
                ref="attrTree1"
                :data="attrTree1"
                :props="defaultProps"
                @node-click="addRightAttr"
              >
              </el-tree>
            </div>
          </div>
          <div>
            <i class="el-icon-sort"></i>
          </div>
          <div class="attr-tree-right">
            <div>已选择列</div>
            <div>
              <el-tree
                ref="attrTree2"
                :data="attrTree2"
                :props="defaultProps"
                @node-click="delRightAttr"
              >
              </el-tree>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button @click="cancelAttrBox">取消</el-button>
          <el-button
            type="primary"
            @click="setTableAttr"
            :loading="sendListLoading"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { exportAttributeRespnse } from '@/apis/gis'
import AkTable from '@/components/gisPageComponents/table'
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

export default {
  name: 'filterPanel',
  components: { AkTable },
  data: () => ({
    filterLabel: {
      name: '区域'
    },
    filterAdd: ['name'],
    filterSortObj: {
      mobileCoverRate: 'custom',
      unicomCoverRate: 'custom',
      telecomCoverRate: 'custom',
      mobileBelongRatio: 'custom',
      unicomBelongRatio: 'custom',
      telecomBelongRatio: 'custom',
      mobileRatio: 'custom',
      unicomRatio: 'custom',
      telecomRatio: 'custom',
      mobileUserRatio: 'custom',
      unicomUserRatio: 'custom',
      telecomUserRatio: 'custom',
      mobileContrastRatio: 'custom',
      unicomContrastRatio: 'custom',
      telecomContrastRatio: 'custom',
      mobileUserDifference: 'custom',
      unicomUserDifference: 'custom',
      telecomUserDifference: 'custom',
      numAll: 'custom'
    },

    pageSize: 10,
    total: 1,
    pageNum: 1,

    tableData: [],
    allAttrList: [
      { name: '移动4G覆盖率', id: 'mobileCoverRate' },
      { name: '联通4G覆盖率', id: 'unicomCoverRate' },
      { name: '电信4G覆盖率', id: 'telecomCoverRate' },
      { name: '移动常驻用户份额', id: 'mobileRatio' },
      { name: '联通常驻用户份额', id: 'unicomRatio' },
      { name: '电信常驻用户份额', id: 'telecomRatio' },
      { name: '移动归属用户份额', id: 'mobileBelongRatio' },
      { name: '联通归属用户份额', id: 'unicomBelongRatio' },
      { name: '电信归属用户份额', id: 'telecomBelongRatio' },
      { name: '总用户数', id: 'numAll' }
    ],
    sendListLoading: false,
    attrDialog: false,
    attrTree1: [],
    defaultProps: {
      label: 'name'
    },
    attrTree2: [],

    tableLoding: false

    // filterDialog: false,
    // // 当前显示的筛选名
    // currentName: '',
    // // 当前显示的筛选项
    // currentDataSelect: {
    //   selectName: '',
    //   andOr: 1,
    //   conditionalValueList:[
    //     {
    //       condition: 1,
    //       value: null
    //     },
    //     {
    //       condition: 2,
    //       value: null
    //     }
    //   ]
    // },

    // // 筛选条件(用于除覆盖和份额的普通项)
    // relationList: [
    //   { name: null, id: null },
    //   { name: '等于' ,id: 1  },
    //   { name: '不等于' ,id: 2  },
    //   { name: '大于' ,id: 3  },
    //   { name: '大于或等于' ,id: 4  },
    //   { name: '小于' ,id: 5  },
    // ],
    // // 筛选条件(用于覆盖)
    // coverRelationList: [
    //   { name: null, id: null },
    //   { name: '等于' ,id: 1  },
    //   { name: '不等于' ,id: 2  },
    //   { name: '大于' ,id: 3  },
    //   { name: '大于或等于' ,id: 4  },
    //   { name: '小于' ,id: 5  },
    //   { name: '弱于竞对-任意一家' ,id: 6  },
    //   { name: '弱于竞对-两家' ,id: 7  },
    //   { name: '强于竞对-任意一家' ,id: 8  },
    //   { name: '强于竞对-两家' ,id: 9  },
    // ],
    // // 筛选条件(用于份额)
    // ratioRelationList: [
    //   { name: null, id: null },
    //   { name: '等于' ,id: 1 },
    //   { name: '不等于' ,id: 2 },
    //   { name: '大于' ,id: 3 },
    //   { name: '大于或等于' ,id: 4 },
    //   { name: '小于' ,id: 5 },
    //   { name: '弱于全市均值(百分点)' ,id: 10 },
    //   { name: '高于全市均值(百分点)' ,id: 11 },
    // ],
    // // 筛选项对应筛选条件列
    // filterAttrToListName: {},
  }),
  computed: {
    ...mapState(['home', 'gisForm']),
    ...mapStateForm([
      'mnc',
      'routeType',
      'townId',
      'areaType',
      'userType',
      'inUseAttrList', //正在使用的 属性列
      'userLineDetailsLabel', //属性列对应中文
      'filterList',
      'filterPageNum',
      'filterPageSize',
      'filterTotal',
      'filterSort',
      'dataSelectList',
      'routeAreaType'
    ])
  },
  filters: {
    // getRule(name, list, toList, strList) {
    //   let copyList = JSON.parse(JSON.stringify(list));
    //   // console.log( name, copyList, toList, strList );
    //   let item = copyList.find(v => v.selectName == name);
    //   let ruleStr = '';
    //   if( item !== undefined ) {
    //     let name = strList.find(v => v.id == item.selectName).name
    //     let relationList = toList[item.selectName];
    //     let str1 = relationList.find( v => v.id == item.conditionalValueList[0].condition ).name + item.conditionalValueList[0].value;
    //     let str2 = item.conditionalValueList[1].condition !== null ? item.andOr == 1 ? '且' : '或' : null;
    //     let str3 = item.conditionalValueList[1].condition !== null
    //     ? (relationList.find( v => v.id == item.conditionalValueList[1].condition ).name + item.conditionalValueList[1].value)
    //     : null;
    //     let p2 = str2 == null || str3 == null ? '': `${str2} [ ${name} ] ${str3} `;
    //     ruleStr = `[ ${name} ] ${ str1 }${p2} `;
    //   }
    //   return ruleStr
    // }
  },

  watch: {
    // 'inUseAttrList'(nv) {
    //   if(nv) {
    //     this.sendListLoading = false;
    //     this.attrDialog = false;

    //     // 调用 属性列 修改方法
    //     this.changeAttrBase();
    //   }
    // },
    filterList(nv) {
      if (nv) {
        this.tableLoding = false
      }
    },
    townId(nv) {
      if (nv) {
        if (this.routeAreaType == 5) {
          if (nv == '全部') {
            this.tableLoding = true
          }
        } else {
          this.tableLoding = true
        }
      }
    },
    areaType(nv) {
      if (nv) {
        this.setFilterPageNum(1)
        this.tableLoding = true
      }
    },
    userType(nv) {
      if (nv) {
        this.setFilterPageNum(1)
        this.tableLoding = true
      }
      this.changeTableHeader()
    },
    //运营商类型
    mnc(nv) {
      if (nv) {
        // 调用 属性列 修改方法
        this.setFilterPageNum(1)
        this.changeTableHeader()
      }
    }
  },
  created() {
    // 设置 筛选项对应筛选条件列
    this.filterAttrToListName = {
      numAll: this.relationList,
      mobileCoverRate: this.coverRelationList,
      unicomCoverRate: this.coverRelationList,
      telecomCoverRate: this.coverRelationList,
      mobileRatio: this.ratioRelationList,
      unicomRatio: this.ratioRelationList,
      telecomRatio: this.ratioRelationList,
      mobileBelongRatio: this.ratioRelationList,
      unicomBelongRatio: this.ratioRelationList,
      telecoBelongRatio: this.ratioRelationList
    }

    // this.getInUseAttrList(); -t
    // this.changeFilterList();
    // this.changeAttrForMnc();
    this.changeTableHeader()
  },
  methods: {
    ...mapMutationsForm([
      'setFilterSort',
      'setUserLineId',
      'setFilterPageNum',
      'setDataSelectList',
      'setUserLineDetails',
      'setIndicatorType',
      'setModalFlag',
      'setStateListStatus'
    ]),
    ...mapActionsForm([
      'getInUseAttrList',
      'changeInUseAttrList',
      'changeFilterList'
    ]),
    changeTableHeader() {
      //动态切换列表表头
      console.log(this.$route)
      if (this.userType > 3 && this.$route.path == '/gisPage/shangji') {
        //集团预警和浸入预警修改表头测试
        this.changTableAttr()
      } else {
        this.changeAttrForMnc()
      }
    },
    // // 获取 当前筛选项参数
    // getCurrentFilter(e) {
    //   // 首先在总列表里找到对应字段
    //   let selectName = this.currentName
    //   let list = JSON.parse(JSON.stringify(this.dataSelectList));
    //   let currentFilter = list.find( v => v.selectName == selectName );
    //   console.log( selectName, list, currentFilter );

    //   if( currentFilter === undefined ) {
    //     this.currentDataSelect = {
    //       selectName: selectName,
    //       andOr:1,
    //       conditionalValueList:[
    //         {
    //           condition: 1,
    //           value: null
    //         },
    //         {
    //           condition: null,
    //           value: null
    //         }
    //       ]
    //     }

    //   }else {
    //     this.currentDataSelect = currentFilter;
    //   }
    // },

    // // 打开筛选弹框
    // showFilterBox() {

    //   // this.getAttrList();

    //   this.currentName = this.attrTree2.length > 0 ? this.attrTree2[0].id : this.allAttrList[0].id;
    //   this.getCurrentFilter();
    //   this.filterDialog = true;
    // },
    // // 关闭弹框
    // cancelFilterBox() {
    //   this.filterDialog = false;
    // },

    // // 设置筛选项
    // setTableFilter() {
    //   let list = JSON.parse(JSON.stringify(this.dataSelectList));
    //   let item = this.currentDataSelect;
    //   // 先对筛选项 做基础判断
    //   // console.log( item, list );
    //   if(
    //     item.conditionalValueList[0].condition == null
    //     || item.conditionalValueList[0].value == null
    //     || ( item.conditionalValueList[1].value == null && item.conditionalValueList[1].condition != null )
    //   ) {
    //     this.$message({
    //       message: '请正确填写筛选项!',
    //       type: 'warning'
    //     })
    //     return false
    //   }
    //   if( list.find(v => v.selectName == item.selectName) == undefined ) {
    //     // 当前选择项不存在
    //     list.push( item );
    //   }else {
    //     // 当前选择项存在
    //     let index = list.findIndex(v => v.selectName == item.selectName);
    //     list.splice( index, 1 );
    //     list.push( item );
    //   }

    //   this.setDataSelectList(list);

    //   // 清除 对象地址相同 修改选项会变的情况；
    //   this.getCurrentFilter()
    //   return true

    // },

    // // 确定筛选项
    // affirmTableFilter() {
    //   let flog = this.setTableFilter();
    //   if( flog ) this.cancelFilterBox();
    // },

    // // 筛选规则是否显示
    // showGetRule(name, list ) {
    //   let reg = false;
    //   let item = list.find(v => v.selectName == name);
    //   if( item !== undefined ) {
    //     reg = true;
    //   }
    //   return reg;
    // },

    // // 删除规则
    // delRule( name ) {
    //   let list = JSON.parse(JSON.stringify(this.dataSelectList));
    //   let index = list.findIndex( v => v.selectName == name );
    //   list.splice( index, 1 );
    //   this.setDataSelectList( list );
    // },

    // 打开属性列框
    showFilterDialog() {
      this.getAttrList()
      this.attrDialog = true
    },
    // 获取当前属性列
    getAttrList() {
      let attrTree1 = []
      let attrTree2 = []
      let allAttrList = this.allAttrList
      let inUseAttrList = this.inUseAttrList
      allAttrList.forEach(item => {
        if (inUseAttrList.includes(item.id)) {
          attrTree2.push(item)
        } else {
          attrTree1.push(item)
        }
      })
      this.attrTree1 = attrTree1
      this.attrTree2 = attrTree2
    },
    // 关闭弹框
    cancelAttrBox() {
      this.attrDialog = false
    },
    // 添加右侧属性
    addRightAttr(node) {
      this.changeListAttr(node, 'attrTree1', 'attrTree2')
    },
    // 删除右侧属性,
    delRightAttr(node) {
      this.changeListAttr(node, 'attrTree2', 'attrTree1')
    },
    // 把一个列表的值移到另一个
    changeListAttr(node, a, b) {
      // a 列表移除
      let index = -1
      this[a].filter((obj, i) => {
        if (obj.name == node.name) {
          index = i
        }
        return obj.name == node.name
      })

      if (index != -1) {
        this.$refs[a].data.splice(index, 1)
      }

      // b 列表添加
      this.$refs[b].data.push({
        name: node.name,
        id: node.id
      })
    },
    // 设置属性表列
    setTableAttr() {
      this.sendListLoading = true
      let list = []
      this.attrTree2.forEach(item => {
        list.push(item.id)
      })
      let listStr = list.join(';')
      this.changeInUseAttrList(listStr)
    },

    // 修改属性列基础 所需值
    changeAttrBase() {
      console.log('修改属性列基础 所需值', this.inUseAttrList)
      let filterLabel = {
        name: '区域'
      }
      let filterAdd = ['name']
      let inUseAttrList = this.inUseAttrList
      let inUseAttrLabel = this.userLineDetailsLabel
      inUseAttrList.forEach(item => {
        if (item) {
          // 去除只有一列的时候 会出现 数组[1]空的情况
          filterLabel[item] = inUseAttrLabel[item]
          filterAdd.push(item)
        }
      })
      this.filterAdd = filterAdd
      this.filterLabel = filterLabel
      console.log(this.filterAdd, this.filterLabel)
    },
    // 当tab为集团预警和漫入预警时
    changTableAttr() {
      let mnc = this.mnc
      let filterLabel = {
        name: '区域'
      }
      let filterAdd = ['name']
      let inUseAttrLabel = this.userLineDetailsLabel
      let allAttrList = this.allAttrList
      let str = mnc == '0' ? 'mobile' : mnc == '1' ? 'unicom' : 'telecom'
      let strFootList = ['Ratio', 'CoverRate']
      if (this.userType == 4) {
        strFootList = ['UserRatio', 'ContrastRatio']
      } else {
        strFootList = ['UserDifference']
      }
      let strList = []
      strFootList.forEach(key => {
        strList.push(str + key)
      })

      strList.forEach(item => {
        if (item) {
          filterLabel[item] = inUseAttrLabel[item]
          filterAdd.push(item)
        }
      })

      this.filterAdd = filterAdd
      this.filterLabel = filterLabel
      console.log(this.filterAdd, this.filterLabel)
    },
    // 根据运营商显示相应属性列表
    changeAttrForMnc() {
      let mnc = this.mnc
      let filterLabel = {
        name: '区域'
      }
      let filterAdd = ['name']
      let inUseAttrLabel = this.userLineDetailsLabel
      let allAttrList = this.allAttrList
      let str = mnc == '0' ? 'mobile' : mnc == '1' ? 'unicom' : 'telecom'
      let strFootList = ['Ratio', 'CoverRate']
      let strList = []
      strFootList.forEach(key => {
        strList.push(str + key)
      })

      strList.forEach(item => {
        if (item) {
          filterLabel[item] = inUseAttrLabel[item]
          filterAdd.push(item)
        }
      })

      this.filterAdd = filterAdd
      this.filterLabel = filterLabel
      console.log(this.filterAdd, this.filterLabel)
    },

    // 更改sort
    changeSortType(e) {
      console.log(e)
      this.tableLoding = true
      this.setFilterSort(e)
    },
    changeCId(e, type) {
      if (type == 1) {
        this.setIndicatorType(e)
      } else if (type == 2) {
        this.setIndicatorType(e)
        this.setModalFlag(true)
      }
      // 把当前选中对象 设置好
      let item = this.filterList.find(v => v.id == e)
      // 传递当前选中项
      this.setUserLineDetails(item)
      // this.setStateListStatus(true)
      // 传递 选中id
      this.setUserLineId({ data: e, jumpMap: true })
    },

    changePage(e) {
      this.tableLoding = true
      this.setFilterPageNum(e)
    },

    // 下载当前报告
    downloadFile() {
      if (this.home.userInfoVo.superAccount == 2) {
        return
      }
      // 设置参数
      let cityId = this.home.userInfoVo.cityId
      let {
        zoneId,
        townId,
        ptMonth,
        networkGridId,
        microGridId,
        areaType,
        userType,
        filterSort,
        filterPageNum,
        filterPageSize,
        dataSelectList,
        allAttrList
      } = this.gisForm
      // 查找当前列 所有的筛选项
      let copyList = JSON.parse(JSON.stringify(dataSelectList))
      let currentList = []
      allAttrList.forEach(item => {
        let selectItem = copyList.find(v => v.selectName == item)
        if (selectItem) {
          if (
            selectItem.conditionalValueList[1].value == null ||
            selectItem.conditionalValueList[1].condition == null
          ) {
            selectItem.conditionalValueList = [
              selectItem.conditionalValueList[0]
            ]
          }
          currentList.push(selectItem)
        }
      })
      let params = {}
      let baseParams = {
        ptMonth: ptMonth,
        pageNum: filterPageNum,
        pageSize: filterPageSize,
        cityId,
        sortType: filterSort.sortType,
        sortStr: filterSort.sortStr,
        dataSelectList: currentList
      }
      if (zoneId == null && networkGridId !== null) {
        baseParams.networkGridId = networkGridId
        baseParams.microGridId = microGridId
      } else {
        baseParams.zoneId = zoneId
        baseParams.townId = townId
      }
      if (userType !== null) {
        // 调用商机接口
        params = {
          ...baseParams,
          userType
        }
      } else {
        // 调用普通接口
        let type = 1
        if (baseParams.zoneId) {
          if (areaType != null || (townId != '全部' && townId != null)) {
            type = 3
          } else if (zoneId != '全部' && zoneId != cityId) {
            type = 2
          }
          params = {
            ...baseParams,
            type,
            zoneId: type == 1 ? null : zoneId,
            townId:
              type == 3 && townId != '全部' && townId != null ? townId : null,
            areaType: type == 3 ? areaType : null
          }
        } else {
          if (
            areaType != null ||
            (microGridId != '全部' && microGridId != null)
          ) {
            type = 3
          } else if (networkGridId != '全部' && networkGridId != cityId) {
            type = 5
          } else {
            type = 4
          }
          params = {
            ...baseParams,
            type,
            networkGridId: type == 4 ? null : networkGridId,
            microGridId:
              type == 5 && microGridId != '全部' && microGridId != null
                ? microGridId
                : null,
            areaType: type == 3 ? areaType : null
          }
        }
      }
      // 获取文件流
      exportAttributeRespnse(params).then(res => {
        // console.log(res);
        let blob = res
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = e => {
          console.log(e)
          let a = document.createElement('a')
          a.download = '属性表.csv'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.data-analy-box {
  .test-icon {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 30px;
    font-size: 17px;
    color: #fff;
    z-index: 2;
  }
  .test-icon-img {
    width: 17px;
    height: 17px;
    right: 54px;
  }
  .download-icon-img {
    width: 18px;
    height: 18px;
    // right: 73px;
  }
}

// // 筛选弹框
// .filter-content {
//   > div:first-child {
//     .filter-content-box {
//       border: 1px solid #999;
//       border-radius: 10px;
//       padding: 12px;
//       display: flex;
//       flex-flow: column;
//       margin-bottom: 10px;

//       > div:not(:first-child) {
//         margin-top: 10px;
//       }
//       > div {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         > div:first-child {
//           width: 200px;
//           margin-right: 20px;
//         }
//         > div:nth-child(2) {
//           flex: 1;
//         }

//       }

//     }
//     > div:last-child {
//       display: flex;
//       justify-content: flex-end;
//       align-items: center;
//     }
//   }
//   .filter-rule {
//     > div:first-child {
//       text-indent: 20px;
//       margin-bottom: 10px;
//     }
//     > div:last-child {
//       border: 1px solid #ccc;
//       padding: 10px;
//       height: 100px;
//       overflow-y: auto;
//       > div {
//         cursor: pointer;
//         &:hover {
//           background-color: #ccc;
//         }
//       }
//     }
//   }
// }

// 选择属性表列的弹窗
.attr-tree {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div:nth-child(2) {
    margin: 0 20px;
    > i {
      transform: rotate(90deg);
      font-size: 20px;
    }
  }
  .attr-tree-left,
  .attr-tree-right {
    width: 45%;
    height: 324px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    > div:first-child {
      text-align: center;
      margin-bottom: 10px;
    }
    > div:nth-child(2) {
      flex: 1;
      overflow: hidden;
      border: 1px solid #999;
      padding: 5px 10px;
    }
  }

  .attr-tree-left {
    > div:nth-child(2) > div {
      flex: 1;
      overflow-y: auto;
    }
  }

  .attr-tree-right {
  }
}
</style>
